<template>
  <div class="containers">
    <div class="canvas" ref="canvas" />
    <!-- <div class="toolbar">
      <a title="download">下载</a>
      <a ref="saveDiagram" href="javascript:void()" title="download BPMN diagram">BPMN</a>
      <a ref="saveSvg" href="javascript:void()" title="download as SVG image">SVG</a>
    </div>-->
    <property-panel ref="bpmnPanel" v-if="bpmnModeler" :modeler="bpmnModeler" @startType="startType"
                    @endType="endType" @dateDiffType="dateDiffType"/>
  </div>
</template>

<script>
// import ModifyModeler from './custom/ModifyModeler'
import PropertyPanel from './PropertyPanel' // 属性面板
import { initialDiagram } from './BpmnData'
import customModule from './customPalette'
import customTranslate from './customTranslate/customTranslate'
import CreateModeler from "./custom/CreateModeler";
import ModifyModeler from "./custom/ModifyModeler";

export default {
  props: {
    processKey: {
      type: String
    }
  },
  data() {
    return {
      bpmnModeler: null,
      modelSource: ''
    }
  },
  components: {
    PropertyPanel
  },
  watch: {
    processKey(nv, ov) {}
  },
  methods: {
    initModeler() {
      const canvas = this.$refs.canvas
      console.log(canvas)

      // 生成实例
      this.bpmnModeler = new ModifyModeler({
        container: canvas,
        additionalModules: [
          // customModule,
          {
            // translate: ['value', customTranslate]
          }
        ]
      })
    },
    initExport() {
      // 获取a标签dom节点
      const downloadLink = this.$refs.saveDiagram
      const downloadSvgLink = this.$refs.saveSvg
      // 监听流程图改变事件
      const _this = this
      this.bpmnModeler.on('commandStack.changed', function() {
        _this.saveSVG().then(function(err, svg) {
          _this.setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg)
        })
        _this.saveDiagram().then(function(err, xml) {
          _this.setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml)
        })
      })
    },
    initDiagram() {
      this.bpmnModeler.importXML(initialDiagram)
    },
    async loadDiagram(source) {
      try {
        const result = await this.bpmnModeler.importXML(source)
      } catch (e) {
        this.bpmnModeler.importXML(initialDiagram)
      }
    },
    // 调整左侧工具栏排版
    initPalette() {
      try {
        // 获取 bpmn 设计器实例
        const canvas = this.$refs.canvas
        console.log(canvas)
        const djsPalette = canvas.children[0].children[1].children[4]
        djsPalette.style['display'] = 'none'
      } catch (e) {
        console.log(e)
      }
    },
    // 下载为SVG格式,done是个函数，调用的时候传入的
    async saveSVG() {
      // 把传入的done再传给bpmn原型的saveSVG函数调用
      return await this.bpmnModeler.saveSVG()
    },
    // 下载为SVG格式,done是个函数，调用的时候传入的xml
    async saveDiagram() {
      // 把传入的done再传给bpmn原型的saveXML函数调用
      return await this.bpmnModeler.saveXML({ format: true })
    },
    // 当图发生改变的时候会调用这个函数，这个data就是图的xml
    setEncoded(link, name, data) {
      // 把xml转换为URI，下载要用到的
      const encodedData = encodeURIComponent(data)
      // 获取到图的xml，保存就是把这个xml提交给后台
      this.modelSource = data
      // 下载图的具体操作,改变a的属性，className令a标签可点击，href令能下载，download是下载的文件的名字
      if (data) {
        link.className = 'active'
        link.href = 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData
        link.download = name
      }
    },
    startType(properties) {
      console.log(properties)
      this.$emit("startType", properties)
    },
    endType(properties) {
      this.$emit("endType", properties)
    },
    dateDiffType(properties) {
      this.$emit("dateDiffType", properties)
    }
  },

  mounted() {
    // 初始化
    this.initModeler()
    // 初始化导出按钮
    this.initExport()
    // 初始化工具栏
    this.initPalette()
  }
}
</script>

<style lang="scss">
/*左边工具栏以及编辑节点的样式*/
@import '~bpmn-js/dist/assets/diagram-js.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

.containers {
  // position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 100%;

  .canvas {
    width: 100%;
    height: 100%;
  }

  .panel {
    position: absolute;
    right: 0;
    top: 50px;
    width: 300px;
  }

  .bjs-powered-by {
    display: none;
  }

  .toolbar {
    position: absolute;
    top: 20px;
    right: 350px;

    a {
      text-decoration: none;
      margin: 5px;
      color: #409eff;
    }
  }
}
</style>
